<template>
    <div
        :class="{
            sjzxLegend: true,
            legendToLeft: !$store.state.sjzxLegendPosition,
        }"
    >
        <div class="legendTitle">图例</div>
        <div class="legendClose" @click="handleLegendClose">
            <span class="el-icon-circle-close"></span>
        </div>
        <div class="legends">
            <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
            >
            <div style="margin: 5px 0"></div>
            <el-checkbox-group
                v-model="$store.state.checkedCities"
                @change="handleCheckedCitiesChange"
            >
                <el-checkbox
                    v-for="type in themeList.list"
                    :label="type.label"
                    :key="type.label"
                    @change="(oldval, newval) => checkboxHandleClick(oldval, newval, type)"
                >
                    <div class="typeIcon">
                        <img
                            class="typeIconImg"
                            :src="`./images/sjzx/icons/${type.label}.png`"
                            alt=""
                        />
                    </div>
                    <div class="typeWord">{{ type.label }}</div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useStore } from "vuex";
import doc from "../../sjzx/sjzxDoc";
import axios from "axios";
import pointeManager from "../fxfkPointManager";
let cityOptions = [
    "水库",
    "地质灾害隐患点",
    "漫水桥(路)",
    "危房",
    "旅游景区景点",
    "易淹易涝点(区)",
    "渔船",
    "渔港",
    "塔吊",
];

export default {
    //props:["typeName"],
    setup() {
        let store = useStore();
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        let checkedCities = ref([]);
        checkedCities.value = store.state.checkedCities;
        watch(
            () => [store.state.checkedCities],
            ([newValue1]) => {
                checkedCities.value = newValue1;
                //store.commit("changeCheckedCities",checkedCities.value);
            }
        );
        //接口获取数据
        let themeList = reactive({ list: [] });
        const getFxffList = async (region) => {
            let sanFangurl = `${sjzxUrl}/api/tree/getRiskTree?ids=146`;
            if(region != undefined){
                sanFangurl = `${sjzxUrl}/api/tree/getRiskTree?ids=146&addvcd=${window.regionCode[region]}`;
            }
            const result = await axios.get(
                sanFangurl
            );
            const orderList = result.data;
            orderList.forEach((order) => {
                order.state1 = false;
            });
            themeList.list = orderList.slice(0,orderList.length-1);
        };
        if (userRegion.value == "海南省") {
            getFxffList();
        } else {
            getFxffList(userRegion.value);
        }
        const state = reactive({
            checkAll: false,
            cities: cityOptions,
            isIndeterminate: true,
        });
        const handleCheckAllChange = (val) => {
            console.log(val);
            //checkedCities.value = val ? cityOptions : [];
            store.commit("changeCheckedCities", val ? cityOptions : []);
            state.isIndeterminate = false;
            //val为true和false, 即全选和全不选
            if (val) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(109.75985598565222,19.261744640490033,467431),
                });
                //全部上球
                
                themeList.list.forEach((ele, index) => {
                    let pointsDataUrl = `${sjzxUrl}${ele.kbApiAll}`;
                    if (userRegion.value == "海南省") {
                    }else{
                        pointsDataUrl = `${sjzxUrl}${ele.kbApiAll}?addvcd=${window.regionCode[userRegion.value]}`
                    }
                    axios.get(pointsDataUrl).then((res) => {
                        pointeManager.addPoints(
                            ele.label,
                            res.data.data,
                            ele.kbApiDetail,
                            "leftClick",
                            pointHandleClick
                        );
                    });
                });
                store.commit("changeFxffThematicMapCheckedContent", {
                    echarts: ["水库市县统计", "水库工程规模统计"],
                    item:themeList.list[0],
                    type: "水库",
                });

            } else {
                pointeManager.removeAll();
                if(store.state.userRegion=="海南省"){
                    store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
                }else{
                    store.commit("changeSjzxLeftCurrentComponent", "");
                }
                
            }
        };
        const handleCheckedCitiesChange = (value) => {
            console.log(value);
            const checkedCount = value.length;
            state.checkAll = checkedCount === state.cities.length;
            state.isIndeterminate =
                checkedCount > 0 && checkedCount < state.cities.length;
        };
        const handleLegendClose = () => {
            store.commit("changeFxffLegendShow", false);
        };
        const pointHandleClick = (entity) => {
            let parma = null;
            if (entity.type == "渔船") {
                parma = "condition";
            } else {
                parma = "id";
            }
            addBoundInfoBox(entity.position._value, "infoBox1");
            axios
                .get(
                    `${sjzxUrl}${entity.kbApiDetail}?${parma}=${entity.detailId}`
                )
                .then((res) => {
                    if (entity.type == "渔船") {
                    //查看渔船
                    let vData = res.data.data;
                    store.commit("changeYCList", vData);
                    
                    addBoundInfoBox(entity.position._value, "infoBox2");
                    //需要加全景
                } else if (entity.type == "地质灾害隐患点") {
                    let vData = res.data.data;
                    let dic = doc[entity.type];
                    let obj = {
                        "隐患基本情况":{},
                        "市县落实情况":{},
                        "省级行业主管部门核查情况":{}
                    };
                    // 原顺序 
                    for (let key in dic) {
                        if(vData.baseInfo.hasOwnProperty(key)){
                            obj["隐患基本情况"][dic[key]] = vData.baseInfo[key];
                        }
                        if(vData.check.hasOwnProperty(key)){
                            obj["市县落实情况"][dic[key]] = vData.check[key];
                        }
                        if(vData.implement.hasOwnProperty(key)){
                            obj["省级行业主管部门核查情况"][dic[key]] = vData.implement[key];
                        }
                    }
                    store.commit("changeInfoBoxThreeContent", obj);
                    addBoundInfoBox(entity.position._value, "infoBox4");
                } else {
                    //隐患基本情况
                    //市县落实情况
                    //省级行业主管部门核查情况
                    //baseInfo check implement
                    //获取字典
                    let dic = doc[entity.type];
                    let vData = res.data.data;
                    let obj = {
                        "隐患基本情况":{},
                        "市县落实情况":{},
                        "省级行业主管部门核查情况":{}
                    };
                    // 原顺序 
                    for (let key in dic) {
                        if(vData.baseInfo.hasOwnProperty(key)){
                            obj["隐患基本情况"][dic[key]] = vData.baseInfo[key];
                        }
                        if(vData.check.hasOwnProperty(key)){
                            obj["市县落实情况"][dic[key]] = vData.check[key];
                        }
                        if(vData.implement.hasOwnProperty(key)){
                            obj["省级行业主管部门核查情况"][dic[key]] = vData.implement[key];
                        }
                    }
                    console.log(obj)
                    store.commit("changeInfoBoxThreeContent", obj);
                    addBoundInfoBox(entity.position._value, "infoBox0");
                }
                });
        };
        const addBoundInfoBox = (positionValue, elementId) => {
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let preRenderListener = viewer.scene.preRender.addEventListener(
                function () {
                    let elWidth = oneDiv.offsetWidth;
                    let elHeight = oneDiv.offsetHeight; // + 60
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
                }
            );
        };

        const addAndRemove = (item) => {
            if (item.state1) {
                //添加点
                let pointsDataUrl = `${sjzxUrl}${ele.kbApiAll}`;
                if (userRegion.value == "海南省") {
                }else{
                    pointsDataUrl = `${sjzxUrl}${ele.kbApiAll}?addvcd=${window.regionCode[userRegion.value]}`
                }
                axios.get(pointsDataUrl).then((res) => {
                    pointeManager.addPoints(
                        item.label,
                        res.data.data,
                        item.kbApiDetail,
                        "leftClick",
                        pointHandleClick
                    );
                });
            } else {
                //清除点
                pointeManager.removePointBySign(item.label);
            }
        };
        const checkboxHandleClick = (e,data,type) => {
            // let hainanCamera = {
            //     destination: Cesium.Cartesian3.fromDegrees(
            //         109.75985598565222,
            //         19.261744640490033,
            //         829962
            //     ),
            // };
            // viewer.camera.flyTo(hainanCamera);
            if(e){
                console.log(data)
                //显示左侧面板
                store.commit(
                    "changeSjzxLeftCurrentComponent",
                    "FxffThematicMapDetail"
                );
                themeList.list.forEach((ele, index) => {
                    
                })
                let pointsDataUrl = `${sjzxUrl}${type.kbApiAll}`;
                if (userRegion.value == "海南省") {
                }else{
                    pointsDataUrl = `${sjzxUrl}${type.kbApiAll}?addvcd=${window.regionCode[userRegion.value]}`
                }
                //请求对应数据接口,上球所有数据
                axios.get(pointsDataUrl).then((res) => {
                    pointeManager.addPoints(
                        type.label,
                        res.data.data,
                        type.kbApiDetail,
                        "leftClick",
                        pointHandleClick 
                    );
                });
                let item = type;
                switch (type.label) {
                    case "水库":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["水库市县统计", "水库工程规模统计"],
                            item,
                            type: "水库",
                        });

                        break;
                    case "地质灾害隐患点":
                        console.log(type);
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: [
                                "市县统计",
                                "灾害类型统计",
                                "灾害规模统计",
                            ],
                            item,
                            type: "地质灾害隐患点",
                        });

                        break;
                    case "漫水桥(路)":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["市县统计"],
                            item,
                            type: "漫水桥(路)",
                        });

                        break;
                    case "危房":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["危房市县统计"],
                            item,
                            type: "危房",
                        });

                        break;
                    case "旅游景区景点":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["市县统计", "日最大承载游客量统计"],
                            item,
                            type: "旅游景区景点",
                        });

                        break;
                    case "易淹易涝点(区)":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: [
                                "市县统计",
                                "影响人数统计",
                                "影响户数统计",
                            ],
                            item,
                            type: "危房",
                        });

                        break;

                    case "渔船":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["渔船市县统计", "渔船抗风等级统计"],
                            item,
                            type: "渔船",
                        });

                        break;

                    case "渔港":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: [
                                "渔港市县统计",
                                "避风船只容量统计",
                                "抗风能力统计",
                            ],
                            item,
                            type: "渔港",
                        });

                        break;
                    case "塔吊":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["塔吊市县统计"],
                            item,
                            type: "塔吊",
                        });

                        break;
                    case "其他":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["其他市县统计"],
                            item,
                            type: "其他",
                        });

                        break;
                    case "三防责任人信息":
                        store.commit("changeFxffThematicMapCheckedContent", {
                            echarts: ["市县统计"],
                            item,
                            type: "三防责任人信息",
                        });
                        break;
                }
            }else{
                pointeManager.removePointBySign(type.label);
            }
            if (checkedCities.value.length > 0) {
                
            } else {
                if(store.state.userRegion=="海南省"){
                    store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
                }else{
                    store.commit("changeSjzxLeftCurrentComponent", "");
                }
            }
        };
        return {
            ...toRefs(state),
            handleCheckAllChange,
            handleCheckedCitiesChange,
            checkboxHandleClick,
            themeList,
            handleLegendClose 
        };
    },
};
</script>

<style lang="stylus" > 


@media (max-width: 2880px) {
    .sjzxLegend {
        width: vw(380);
        height: vh(300);
        position: absolute;
        bottom: vh(10);
        left: vw(420);
        transition: all 0.5s;
        z-index: 13;
        background: url('/images/sjzx/tuli.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw(10);

        .legendTitle {
            width: 100%;
            height: vh(30);
            line-height: vh(30);
            padding-top: vh(5);
            color: #FEBF65;
            font-size: vw(20);
            text-align: center;
        }

        .legendClose {
            position: absolute;
            top: vh(10);
            right: vw(10);
            font-size: vw(14);
            cursor: pointer;
        }

        .legends {
            padding: vh(5) vw(5);
            font-size: vw(14);

            .el-checkbox {
                .el-checkbox__label {
                    font-size: vw(14);
                    line-height: vh(20);
                }
            }

            .el-checkbox-group {
                font-size: vw(14);

                .el-checkbox {
                    width: vw(145);
                    height: vh(40);

                    .typeIcon {
                        width: vw(30);
                        height: vh(30);
                        margin-left: vw(1);
                        margin-right: vw(3);
                        display: inline-block;

                        img {
                            width: vw(30);
                            height: vh(30);
                            line-height: vh(30);
                            vertical-align: middle;
                        }
                    }

                    .typeWord {
                        display: inline-block;
                    }

                    .el-checkbox__label {
                        font-size: vw(14);
                        height: vh(25);
                        line-height: vh(25);
                    }
                }
            }
        }
    }

    .legendToLeft {
        left: vw(26);
        transition: all 0.5s;
    }
}
@media (min-width: 3000px) {
    .sjzxLegend {
        width: vw1(550);
        height: vh(300);
        position: absolute;
        bottom: vh(40);
        left: vw1(950);
        transition: all 0.5s;
        z-index: 13;
        background: url('/images/sjzx/tuli.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw1(20);

        .legendTitle {
            width: 100%;
            height: vh(30);
            line-height: vh(30);
            padding-top: vh(10);
            color: #FEBF65;
            font-size: vw1(22);
            text-align: center;
        }

        .legendClose {
            position: absolute;
            top: vh(10);
            right: vw1(20);
            font-size: vw1(28);
            cursor: pointer;
        }

        .legends {
            padding: vh(5) vw1(10);
            font-size: vw1(24);

            .el-checkbox {
                margin-right:0;
                .el-checkbox__label {
                    font-size: vw1(24);
                    line-height: vh(20);
                }
                .el-checkbox__inner{
                    width:vw1(20)
                    height:vh(20)
                }
                .el-checkbox__inner::after{
                    height:vh(10)
                    left:vw1(7)
                }
            }

            .el-checkbox-group {
                font-size: vw1(24);

                .el-checkbox {
                    width: vw1(250);
                    height: vh(40);

                    .typeIcon {
                        width: vw1(30);
                        height: vh(30);
                        margin-left: vw1(2);
                        margin-right: vw1(6);
                        display: inline-block;

                        img {
                            width: vw1(30);
                            height: vh(30);
                            line-height: vh(30);
                            vertical-align: middle;
                        }
                    }

                    .typeWord {
                        display: inline-block;
                    }

                    .el-checkbox__label {
                        font-size: vw1(24);
                        height: vh(25);
                        line-height: vh(25);
                    }
                    .el-checkbox__inner{
                        width:vw1(20)
                        height:vh(20)
                    }
                    .el-checkbox__inner::after{
                        height:vh(10)
                        left:vw1(7)
                    }
                }
            }
        }
    }

    .legendToLeft {
        left: vw1(26);
        transition: all 0.5s;
    }
}
</style>